<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<div class="ms-PeoplePicker">
  <div class="ms-PeoplePicker-searchBox">
    <input class="ms-PeoplePicker-searchField" type="text">
  </div>
  <div class="ms-PeoplePicker-results">
      <div class="ms-PeoplePicker-resultGroups">
          <div class="ms-PeoplePicker-resultGroup">
              <div class="ms-PeoplePicker-resultGroupTitle">Top results</div>
              <ul class="ms-PeoplePicker-resultList">
                  <li class="ms-PeoplePicker-result">
                    <div tabindex="0" role="button" class="ms-PeoplePicker-resultBtn">
                      <div class="ms-Persona ms-Persona--square">
                        <div class="ms-Persona-imageArea">
                          <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                        </div>
                        <div class="ms-Persona-presence"></div>
                        <div class="ms-Persona-details">
                          <div class="ms-Persona-primaryText">Russel Miller</div>
                          <div class="ms-Persona-secondaryText">Sales</div>
                        </div>
                      </div>
                      <button class="ms-PeoplePicker-resultAction js-resultRemove"><i class="ms-Icon ms-Icon--x"></i></button>
                    </div>
                  </li>
                  <li class="ms-PeoplePicker-result">
                    <div tabindex="0" role="button" class="ms-PeoplePicker-resultBtn">
                      <div class="ms-Persona ms-Persona--square">
                        <div class="ms-Persona-imageArea">
                          <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                        </div>
                        <div class="ms-Persona-presence"></div>
                        <div class="ms-Persona-details">
                          <div class="ms-Persona-primaryText">Douglas Fielder</div>
                          <div class="ms-Persona-secondaryText">Public Relations</div>
                        </div>
                      </div>
                      <button class="ms-PeoplePicker-resultAction js-resultRemove"><i class="ms-Icon ms-Icon--x"></i></button>
                    </div>
                  </li>
              </ul>
          </div>
          <div class="ms-PeoplePicker-resultGroup">
              <div class="ms-PeoplePicker-resultGroupTitle">Other results</div>
              <ul class="ms-PeoplePicker-resultList">
                  <li class="ms-PeoplePicker-result">
                    <div tabindex="0" role="button" class="ms-PeoplePicker-resultBtn">
                      <div class="ms-Persona ms-Persona--square">
                        <div class="ms-Persona-imageArea">
                          <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                        </div>
                        <div class="ms-Persona-presence"></div>
                        <div class="ms-Persona-details">
                          <div class="ms-Persona-primaryText">Russel Miller</div>
                          <div class="ms-Persona-secondaryText">Sales</div>
                        </div>
                      </div>
                      <button class="ms-PeoplePicker-resultAction js-resultRemove"><i class="ms-Icon ms-Icon--x"></i></button>
                    </div>
                  </li>
                  <li class="ms-PeoplePicker-result">
                    <div tabindex="0" role="button" class="ms-PeoplePicker-resultBtn">
                      <div class="ms-Persona ms-Persona--square">
                        <div class="ms-Persona-imageArea">
                          <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                        </div>
                        <div class="ms-Persona-presence"></div>
                        <div class="ms-Persona-details">
                          <div class="ms-Persona-primaryText">Douglas Fielder</div>
                          <div class="ms-Persona-secondaryText">Public Relations</div>
                        </div>
                      </div>
                      <button class="ms-PeoplePicker-resultAction js-resultRemove"><i class="ms-Icon ms-Icon--x"></i></button>
                    </div>
                  </li>
                  <li class="ms-PeoplePicker-result">
                    <div tabindex="0" role="button" class="ms-PeoplePicker-resultBtn">
                      <div class="ms-Persona ms-Persona--square">
                        <div class="ms-Persona-imageArea">
                          <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                        </div>
                        <div class="ms-Persona-presence"></div>
                        <div class="ms-Persona-details">
                          <div class="ms-Persona-primaryText">Grant Steel</div>
                          <div class="ms-Persona-secondaryText">Technical Support</div>
                        </div>
                      </div>
                      <button class="ms-PeoplePicker-resultAction js-resultExpand"><i class="ms-Icon ms-Icon--chevronsDown"></i></button>
                    </div>
                      <div class="ms-PeoplePicker-resultAdditionalContent">
                          <ul class="ms-PeoplePicker-resultList">
                              <li class="ms-PeoplePicker-result">
                                <div tabindex="0" role="button" class="ms-PeoplePicker-resultBtn">
                                  <div class="ms-Persona ms-Persona--square">
                                    <div class="ms-Persona-imageArea">
                                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png"> 
                                    </div>
                                    <div class="ms-Persona-presence"></div>
                                    <div class="ms-Persona-details">
                                      <div class="ms-Persona-primaryText">Jessica Fischer</div>
                                      <div class="ms-Persona-secondaryText">Public Relations</div>
                                    </div>
                                  </div>
                                  <button class="ms-PeoplePicker-resultAction js-resultRemove"><i class="ms-Icon ms-Icon--x"></i></button>
                                </div>
                              </li>
                              <li class="ms-PeoplePicker-result">
                                <div tabindex="0" role="button" class="ms-PeoplePicker-resultBtn">
                                  <div class="ms-Persona ms-Persona--square">
                                    <div class="ms-Persona-imageArea">
                                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">    
                                    </div>
                                    <div class="ms-Persona-presence"></div>
                                    <div class="ms-Persona-details">
                                      <div class="ms-Persona-primaryText">Grant Steel (bask)</div>
                                      <div class="ms-Persona-secondaryText">Public Relations</div>
                                    </div>
                                  </div>
                                  <button class="ms-PeoplePicker-resultAction js-resultRemove"><i class="ms-Icon ms-Icon--x"></i></button>
                                </div>
                              </li>
                          </ul>
                      </div>
                  </li>
                  <li class="ms-PeoplePicker-result">
                    <div tabindex="0" role="button" class="ms-PeoplePicker-resultBtn">
                      <div class="ms-Persona ms-Persona--square">
                        <div class="ms-Persona-imageArea">
                          <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                        </div>
                        <div class="ms-Persona-presence"></div>
                        <div class="ms-Persona-details">
                          <div class="ms-Persona-primaryText">Harvey Wallin</div>
                          <div class="ms-Persona-secondaryText">Delivery</div>
                        </div>
                      </div>
                      <button class="ms-PeoplePicker-resultAction js-resultRemove"><i class="ms-Icon ms-Icon--x"></i></button>
                    </div>
                  </li>
                  <li class="ms-PeoplePicker-result">
                    <div tabindex="0" role="button" class="ms-PeoplePicker-resultBtn">
                      <div class="ms-Persona ms-Persona--square">
                        <div class="ms-Persona-imageArea">
                          <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                        </div>
                        <div class="ms-Persona-presence"></div>
                        <div class="ms-Persona-details">
                          <div class="ms-Persona-primaryText">Marcus Lauer</div>
                          <div class="ms-Persona-secondaryText">Marketing</div>
                        </div>
                      </div>
                      <button class="ms-PeoplePicker-resultAction js-resultRemove"><i class="ms-Icon ms-Icon--x"></i></button>
                    </div>
                  </li>
              </ul>
          </div>
      </div>
      <div class="ms-PeoplePicker-searchMore ms-PeoplePicker-searchMore--disconnected">
        <div tabindex="0" role="button" class="ms-PeoplePicker-searchMoreBtn">
          <div class="ms-PeoplePicker-searchMoreIcon">
            <i class="ms-Icon ms-Icon--alert"></i>
          </div>
          <div class="ms-PeoplePicker-searchMorePrimary">We are having trouble connecting to the server.<br>Please try again in a few minutes.</div>
        </div>
      </div>
  </div>
</div>
